.login-container {
  height: 100%; /*设置容器的高度为其父元素的高度，意味着该元素的高度会填充父容器的整个高度 */
  min-height: 550px; /* 设置容器的最小高度为 550px，确保容器即使在内容较少时也不会低于 550px */
  background-color: #eeeeee;/*  设置容器的背景颜色为淡灰色（#eeeeee） */
  /* background-image: url('@/assets/images/login_bg.svg');/* 设置容器的背景图像为路径 @/assets/images/login_bg.svg 指向的 SVG 图像。此路径通常是一个相对路径，指向项目文件夹中的资源。*/
  background-size: cover;/*cover 值意味着背景图片会覆盖整个容器。如果容器的宽高比与图片不匹配，图片将被裁剪以确保它填充整个容器。图片的宽度和高度会按照容器的比例进行缩放，可能会裁剪图片的某些部分*/
  //background-image: url('@/assets/images/login_left.png');
  background-image: url('@/assets/images/test3.svg');

  .login-box-self {
    position: relative; /*设置 .login-box 的定位为相对定位。相对定位使得该元素可以相对于其正常位置进行调整，常用于在容器中定位绝对定位的元素。*/
    box-sizing: border-box; /*这意味着元素的宽度和高度包括其内边距（padding）和边框（border）。这对于避免布局问题很有用，因为它让你能够更精确地控制元素的总尺寸*/
    display: flex;/* 设置 .login-box 使用弹性盒布局（Flexbox）。这使得子元素可以更容易地在父容器中对齐和分布。*/
    align-items: center;/* */
    justify-content: space-around; /* Flexbox 属性，表示在主轴（水平方向）上，子元素之间的空间将被均匀分配，每个元素两边都有相同的空间 */
    width: 96.5%;/* 父容器宽度的 96.5%，即留有 3.5% 的空间*/
    height: 94%;/*     父容器宽度的 94%，即留有 6% 的空间*/
    padding: 0 50px; /*    内边距，左右各有 50px 的间隔。上下没有内边距*/
    //background-color: rgb(255 255 255 / 80%);/* 背景色*/
    border-radius: 10px;/*  圆角10%*/


    .dark {
      position: absolute;/* */
      top: 13px;
      right: 18px;
    }

    //.login-left {
    //  position: absolute;
    //  width: 100%;  /* 使图片宽度充满容器 */
    //  height: 100%;  /* 使图片高度充满容器 */
    //  margin-right: 10px;
    //  opacity: 0.8; /* 设置透明度，0为完全透明，1为完全不透明 */
    //  overflow: hidden; /* 超出部分隐藏 */
    //
    //  .login-left-img {
    //    width: 100%; /* 使图片宽度充满容器 */
    //    height: 100%; /* 使图片高度充满容器 */
    //    opacity: 0.8; /* 设置透明度 */
    //    object-fit: cover; /* 保持图片比例，填充容器并可能裁剪图片 */
    //  }
    //}

    .login-form {
      width: 420px;
      /* 如果只写一个值（例如 padding: 50px;），那么所有四个方向的内边距都会设置为 50px。
        如果写两个值（例如 padding: 50px 40px;），则第一个值应用于上下内边距，第二个值应用于左右内边距。
        如果写三个值（例如 padding: 50px 40px 45px;），则第一个值应用于上内边距，第二个值应用于左右内边距，第三个值应用于下内边距 */
      padding: 50px 40px 45px;
      background-color: rgba(255, 255, 255, 0.0); /* 设置透明背景，0.6表示60%不透明 */
      border-radius: 10px;
      //box-shadow: rgb(0 0 0 / 10%) 0 2px 10px 2px;/* 水晶效果块 */

      .login-logo {
        display: flex;/*  弹性盒对齐，这使得子元素可以更容易地在父容器中对齐和分布*/
        align-items: center;/*  Flexbox 中，align-items 属性用于控制子元素在交叉轴（垂直轴）上的对齐方式。center 表示将子元素垂直居中对齐。*/
        justify-content: center;/*  用于控制子元素在主轴（水平方向）上的对齐方式。center 表示将子元素水平居中对齐。*/
        margin-bottom: 20px; /* .login-logo 的底部外边距为 45px，确保其与下面的内容有一定的空间。*/

        .login-icon {
          width: 60px;
          height: 52px;
        }

        .logo-text {
          font-size: 42px;
          font-weight: bold;
          color: #34495e;
          padding: 0 0 0 25px;
          margin: 0;
          white-space: nowrap;
          background-image: linear-gradient(to right, #ff7e5f, #feb47b);
          -webkit-background-clip: text;
          color: transparent;
          text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
        }
      }

      .el-form-item {
        margin-bottom: 40px;
      }

      .login-btn {
        display: flex;
        justify-content: space-between;
        width: 100%;
        margin-top: 40px;
        white-space: nowrap;

        .el-button {
          width: 185px;
        }
      }
    }
  }
}

@media screen and (width <= 1250px) {
  .login-left {
    display: none;
  }
}

@media screen and (width <= 600px) {
  .login-form {
    width: 97% !important;
  }
}
